<template>
  <div>
    <el-row style="background-color: white; margin-bottom: 8px; padding: 8px">
      <el-col
        :span="14"
        style="text-align: left"
      />
      <el-col
        :span="10"
        style="text-align: right"
      />
    </el-row>
    <el-row>
      <el-table
        ref="mytable"
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        :max-height="heightY"
        :height="heightY"
        :indent="indentNumber"
        border
        :load="load"
        lazy
        :tree-props="{ children: 'children', hasChildren: 'isParent' }"
      >
        <el-table-column
          prop="name"
          label="目录名称"
          sortable
          width="700"
        />
        <el-table-column
          prop="content3"
          label="序号"
          sortable
          width="600"
        />
        <el-table-column
          label="操作"
          align="center"
          header-align="center"
        >
          <template slot-scope="scope">
            <el-button
              plain
              type="primary"
              :disabled="selectAssessState != 1"
              @click="addTree(scope.row)"
            >
              添加下级
            </el-button>
            <el-button
              type="primary"
              plain
              :disabled="selectAssessState != 1"
              @click="updateTree(scope.row)"
            >
              修改
            </el-button>
            <el-button
              type="danger"
              plain
              :disabled="selectAssessState != 1"
              @click="deleteTreeDataById(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div
        class="row"
        style="width: 100%; float: left; text-align: center; margin-top: 5px"
      />
    </el-row>
    <!-- 弹框 -->
    <el-dialog
      :title="form.treeTitle"
      :fullscreen="dialogFullscree"
      :visible.sync="dialogVisible"
      width="40%"
      class="showDialogClass"
      :close-on-click-modal="false"
      :before-close="handleClose"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="190px"
      >
        <el-form-item :label="form.treeLabel">
          <el-input
            :disabled="false"
            v-model="form.name"
          />
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number
            v-model.number="form.sort"
            :min="1"
            :max="100"
            label="只能是数字"
          />
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="onSubmit"
        >
          {{ buttonText }}
        </el-button>
        <el-button @click="handleClose">
          取消
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

  <script>
  import { getTreeDataList, save, update, deleteTree } from "@/api/datacentersg/archives/diretory";
  import store from "@/store";

  export default {
    name: `templateName`,
    data () {
      return {
        buttonText: `保存`,
        tableData: [],
        indentNumber: 24,
        // 表格数据
        dataList: [],
        heightY: `${window.innerHeight - 150}px`,
        dialogVisible: false,
        dialogFullscree: false,
        selectAssessState: 1,
        // 表单变量
        form: {
          treeLabel: ``,
          treeTitle: ``,
          id: null,
          code: ``,
          name: ``,
          type: ``,
          level: ``,
          sort: null,
          state: ``,
        },
        addRow: ``,
        updateRow: ``,
        fileBussinessTypeCode: `111`,
        maps: new Map(),
      };
    },
    created () {
      this.getDataList();
    },
    //方法集合
    methods: {
      load (tree, treeNode, resolve) {
        console.log(tree);
        this.maps.set(tree.id, { tree, treeNode, resolve })
        setTimeout(() => {
          const params = {
            userId: store.getters.userId.toString(),
            token: store.getters.token.toString(),
            userName: store.getters.userName.toString(),
            data: {
              fileBussinessTypeCode: this.fileBussinessTypeCode,
              fileDiretoryId: tree.id,
            },
          };
          getTreeDataList(params).then((data) => {
            if (data.result === true) {
              resolve(data.resultdata.data)
            }
            else {
              this.$message({
                type: `warning`,
                message: `获取信息出错`,
              });
            }
          })
        }, 1000)
      },
      getDataList () {
        const params = {
          userId: store.getters.userId.toString(),
          token: store.getters.token.toString(),
          userName: store.getters.userName.toString(),
          data: {
            fileBussinessTypeCode: this.fileBussinessTypeCode,
            fileDiretoryId: null,
          },
        };
        getTreeDataList(params).then((data) => {
          if (data.result === true) {
            this.tableData = data.resultdata.data;
          }
          else {
            this.$message({
              type: `warning`,
              message: `获取信息出错`,
            });
          }
        });
      },
      // 局部刷新列表
      refreshLoad (parentId) {
        if (!this.maps.has(parentId)) {
          return;
        }
        const { tree, treeNode, resolve } = this.maps.get(parentId);
        this.load(tree, treeNode, resolve);
      },
      deleteTreeDataById (row) {
        this.$confirm(`是否确认删除?`, `提示`, {
          confirmButtonText: `确定`,
          cancelButtonText: `取消`,
          type: `warning`,
        }).then(() => {
          const params = {
            'userId': store.getters.userId.toString(),
            'token': store.getters.token.toString(),
            userName: store.getters.userName.toString(),
            data: {
              fileDiretoryId: row.id,
              fileBussinessTypeCode: this.fileBussinessTypeCode,
            },
          }
          deleteTree(params).then((data) => {
            if (data.result === true) {
              this.$message({
                type: `success`,
                message: `删除成功`,
              })

              this.refreshLoad(row.pid)
              // mytable
              const mytable = this.$refs[`mytable`]
              // store
              const list = mytable.store.states.lazyTreeNodeMap[row.pid]
              if (list.length === 1) {
                this.$set(mytable.store.states.lazyTreeNodeMap, row.pid, [])
              }
            }
          })
        })
          .catch((err) => {
            this.$message({
              type: `info`,
              message: `删除已取消`,
            })
          })
      },
      //新增下级按钮
      addTree (row) {
        this.addRow = row;
        this.dialogVisible = true;
        this.form.treeTitle = `新增下级目录`
        this.form.treeLabel = `新增目录名称`
        this.form.state=`add`;
        this.form.name=``;
      },
      // 修改按钮
      updateTree (row) {
        this.updateRow = row;
        this.dialogVisible = true;
        this.form.name = row.name;
        this.form.sort = row.content3;
        this.form.treeTitle = `修改目录信息`
        this.form.treeLabel = `目录名称`
        this.form.state=`upd`;
      },
      onSubmit () {
        if (this.form.name == `` || this.form.name == null) {
          this.$message({
            message: `请输入目录名称！`,
            type: `error`,
          })
          return false;
        }
        const params = {
          'userId': store.getters.userId.toString(),
          'token': store.getters.token.toString(),
          userName: store.getters.userName.toString(),
          "data": {
            fileBussinessTypeCode: this.fileBussinessTypeCode,
            fileDiretoryName: this.form.name,
            diretoryParentId: this.addRow.id,
            diretoryOrder: this.form.sort,
          },
        }
        if (this.form.state === `add`) {
          save(params).then((data) => {
            if (data.result === true) {
              this.$message({
                type: `success`,
                message: `操作成功`,
              })
              this.dialogVisible = false;
              this.$nextTick(() => {
                this.tableData = [];
              })
              this.getDataList();
              this.refreshLoad(this.addRow.pid)
            }
            else {
              this.$message({
                type: `warning`,
                message: `操作失败`,
              })
            }
          })
        }
        else if (this.form.state === `upd`) {
          const param = {
            'userId': store.getters.userId.toString(),
            'token': store.getters.token.toString(),
            userName: store.getters.userName.toString(),
            "data": {
              fileDiretoryId: this.updateRow.id,
              fileBussinessTypeCode: this.fileBussinessTypeCode,
              fileDiretoryName: this.form.name,
              diretoryParentId: this.updateRow.pid,
              diretoryOrder: this.form.sort,
            },
          }
          update(param).then((data) => {
            if (data.result === true) {
              this.$message({
                type: `success`,
                message: `修改成功`,
              })
              this.dialogVisible = false;
              if (this.updateRow.pid === `0`) {
                this.$nextTick(() => {
                  this.tableData = [];
                })
                this.getDataList();
              }
              else {
                this.refreshLoad(this.updateRow.pid)
              }
            }
            else {
              this.$message({
                type: `warning`,
                message: `修改失败`,
              })
            }
          })
        }
      },
      cancel () {
        this.dialogVisible = false;
        this.form = {
          id: ``,
          code: ``,
          name: ``,
          type: ``,
          level: ``,
          sort: 0,
          treeTitle: ``,
          treeLabel: ``,
          state: ``,
        }
      },
      handleClose () {
        this.cancel();
      },
    },
  };
</script>

  <style scoped>
</style>


loadOptions(node, resolve) {
  if (node.level === 0) {
    const params = {
      userId: store.getters.user_id.toString(),
      token: store.getters.token.toString(),
      userName: store.getters.userName.toString(),
      data: {
        fileBussinessTypeCode: this.fileBussinessTypeCode,
        fileDiretoryId: null,
      },
    };
    getTreeDataList(params).then((data) => {
      if (data.result === true) {
        const options = data.resultdata.data.map(obj => ({
          label: obj.name,
          id: obj.id,
          value: obj.id,
          children: [],
        }));
        resolve(options);
      } else {
        this.$message({
          type: 'warning',
          message: '获取信息出错',
        });
        resolve([]);
      }
    });
  } else if (node.data && node.data.id && !this.isLoading) {
    this.isLoading = true;
    setTimeout(() => {
      const params = {
        userId: store.getters.user_id.toString(),
        token: store.getters.token.toString(),
        userName: store.getters.userName.toString(),
        data: {
          fileBussinessTypeCode: '111',
          fileDiretoryId: node.data.id,
        },
      };
      this.nodeId = node.data.id;
      getTreeDataList(params)
        .then((data) => {
          if (data.result === true) {
            const options = data.resultdata.data.map(obj => ({
              label: obj.name,
              id: obj.id,
              value: obj.name,
            }));
            resolve(options);
            this.getDataList();
            this.isLoading = false;
          } else {
            this.$message({
              type: 'warning',
              message: '获取信息出错',
            });
            this.isLoading = false;
          }
        })
        .catch(() => {
          this.isLoading = false;
        });
    }, 500);
  } else {
    resolve([]);
  }
},